<template>
    <div style="margin:3px;pading:2px">
        <!-- {{allData}} -->
        <br>
        <!-- {{unscheduleData}}         -->
        <Row>

            <i-col span="4" offset="4">
                <div id="cpu-pie" style="height: 300px"></div>
            </i-col>
            <i-col span="4" offset="4">
                <div id="memory-pie" style="height: 300px"></div>
            </i-col>
            <!-- <i-col span="4">
                <div id="pod-pie" style="height: 300px"></div>
            </i-col> -->
        </Row>
        <br><br>
        <h3>可调度节点(worker)</h3>
        <i-table  :loading="loading" :columns="format" :data="scheduleData"></i-table >
        <br>


        <h3>不可调度节点(master)</h3>
        <i-table  :loading="loading"  :columns="format" :data="unscheduleData"></i-table >

        <!-- <h3>所有节点</h3>
        <i-table  :loading="loading"  :columns="format" :data="allData"></i-table > -->

        <br>
<!-- 
        <h3>资源请求限制</h3>
        <pre>{{cluster_resources}}</pre>
        <br> -->
    </div>

</template>

<script>

import store from '@/store'
import echarts from 'echarts'
import { get_cluster_stats } from  '@/api'
// import { get_cluster_resources } from '@/api'
import { k8s_cluster_post } from '@/api/http'
export default {

    name:'clusterStat',
    data() {
        return {
            loading: true,
            sharedState: store.state,
            format: [
                // [
                //     {
                //         "cpu_total": 22000,
                //         "cpu_usage": 1591,
                //         "memory_total": 32746,
                //         "memory_usage": 13754,
                //         "pod_total": 660,
                //         "disk": 620
                //     }
                // ]
                {
                    title: 'cpu使用/总量',align:'center',
                    render: (h,params) => {
                        let cpu_total= (params.row.cpu_total/1000).toFixed(1)
                        let cpu_usage  = (params.row.cpu_usage/1000).toFixed(1)
                        let value = cpu_usage+"c/"+cpu_total+"c"
                        return h('p',value)
                    }
                },
                {
                    title: 'cpu使用率',
                     render: (h,params) => {
                        let cpu_total= params.row.cpu_total
                        let cpu_usage  = params.row.cpu_usage

                        let value = (cpu_usage/cpu_total*100).toFixed(1)
                        if (value > 50 && value < 80){
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'active'}}, value+'%');
                        } else if (value >= 80){
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'wrong'}}, value+'%');
                        } else {
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'success'}}, value+'%');
                        }
                    }

                },
                // {
                //     title: '内存总数',
                //     key: 'memory_total'
                // },
                // {
                //     title: '内存使用量',
                //     key: 'memory_usage'
                // },
                {
                    title: '内存使用/总量',align:'center',
                    render: (h,params) => {
                        // let memory_total= (params.row.memory_total/1024).toFixed(1)
                        // let memory_usage  = (params.row.memory_usage/1024).toFixed(1)
                        let memory_total= (params.row.memory_total/1024).toFixed(1)
                        let memory_usage  = (params.row.memory_usage/1024).toFixed(1)
                        let value = memory_usage+"G/"+memory_total+"G"
                        return h('p',value)
                    }
                },
                {
                    title: '内存使用率',
                    render: (h, params) => {
                        let memory_total= params.row.memory_total
                        let memory_usage  = params.row.memory_usage

                        let value = (memory_usage/memory_total*100).toFixed(1)
                        if (value > 50 && value < 80){
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'active'}}, value+'%');
                        } else if (value >= 80){
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'wrong'}}, value+'%');
                        } else {
                            return  h('i-progress',{ props:{percent: parseFloat(value),'stroke-width': 15,'status':'success'}}, value+'%');
                        }
                    }
                },
                // {
                //     title: 'pod总数',
                //     key: 'pod_total',

                // },
                // {
                //     title: 'pod使用量',
                //     key: 'pod_usage'
                // },
                // {
                //     title: '使用/总',key: 'pod_total',align:'center',
                //     render: (h,params) => {
                //         let pod_total= params.row.pod_total
                //         let pod_usage  = params.row.pod_usage
                //         let value = pod_usage+"个/"+pod_total+"个"
                //         return h('p',value)
                //     }
                // },
                {
                    title: 'POD容量',key: 'pod_total',align:'center',
                    render: (h,params) => {
                        let value = params.row.pod_total+ '个'
                        return h('p',value)
                    }
                },
                // {
                //     title: 'pod使用率',
                //     key: 'pod_usage_percent',
                //     render: (h, params) => {
                //         let value = params.row.pod_usage_percent
                //         if (value > 50 && value < 80){
                //             return  h('i-progress',{ props:{percent: value,'stroke-width': 15,'status':'active'}}, value);
                //         } else if (value >= 80){
                //             return  h('i-progress',{ props:{percent: value,'stroke-width': 15,'status':'wrong'}}, value);
                //         } else {
                //             return  h('i-progress',{ props:{percent: value,'stroke-width': 15,'status':'success'}}, value);
                //         }
                //     }
                // },
                {
                    title: '磁盘容量',key: 'disk',align:'center',
                    render: (h,params) => {
                        let value = params.row.disk+ 'G'
                        return h('p',value)
                    }
                },
            ],
            scheduleData: [],
            allData: [],
            unscheduleData: [],
            // cluster_resources: null,
        }
    },
    methods: {

        add_chart(data) {
            let cluster_data = data[0]
            let cpu_total = cluster_data.cpu_total
            let cpu_usage = cluster_data.cpu_usage
            let cpu_usage_percent = parseFloat((cpu_usage/cpu_total*100).toFixed(1))
            // let cpu_usage_percent = cluster_data.cpu_usage_percent
            let cpu_available_percent = 100 -cpu_usage_percent

            let memory_total = cluster_data.memory_total
            let memory_usage = cluster_data.memory_usage
            // let memory_usage_percent = cluster_data.memory_usage_percent
            let memory_usage_percent = parseFloat((memory_usage/memory_total*100).toFixed(1))
            let memory_available_percent = 100 -memory_usage_percent

            // let pod_total = cluster_data.pod_total
            // let pod_usage = cluster_data.pod_usage
            // let pod_usage_percent = cluster_data.pod_usage_percent
            // let pod_available_percent = 100 -pod_usage_percent

            // console.log(cpu_total,cpu_usage,cpu_usage_percent,cpu_available_percent,
            //             memory_total,memory_usage,memory_usage_percent,memory_available_percent,
            //             pod_total,pod_usage,pod_usage_percent,pod_available_percent)

            let cpu_pie = echarts.init(document.getElementById('cpu-pie'))
            cpu_pie.setOption({
                title: {
                    text: '集群CPU概况',
                    subtext: '',
                    x: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    // a ==> serias.name b=>data: ['使用','剩余']
                    formatter: "{a} <br/>{b} {c}% "   
                },
                legend: {
                    orient: 'vertical',
                    bottom: 'bottom',
                    data: ['使用','剩余']
                },
                //饼图中各模块的颜色
                color: ['#32dadd', '#b6a2de'],
                series : [
                    {
                        name: 'CPU',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {name:'使用', value: cpu_usage_percent},
                            {name:'剩余', value: cpu_available_percent},
                        ],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                    position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                },
                                labelLine: {
                                    show: false//官网demo里外部标注上的小细线的显示隐藏    默认显示
                                }
                            }
                        }
                    }
                ],
            })
            let memory_pie = echarts.init(document.getElementById('memory-pie'))
            memory_pie.setOption({
                title: {
                    text: '集群内存概况',
                    subtext: '',
                    x: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    // a ==> serias.name b=>data: ['使用','剩余']
                    formatter: "{a} <br/>{b} {c}% "   
                },
                legend: {
                    orient: 'vertical',
                    bottom: 'bottom',
                    data: ['使用','剩余']
                },
                //饼图中各模块的颜色
                color: ['#32dadd', '#b6a2de'],
                series : [
                    {
                        name: '内存',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {name:'使用', value: memory_usage_percent},
                            {name:'剩余', value: memory_available_percent},
                        ],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                    position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                },
                                labelLine: {
                                    show: false//官网demo里外部标注上的小细线的显示隐藏    默认显示
                                }
                            }
                        }
                    }
                ],
            })


            // let pod_pie = echarts.init(document.getElementById('pod-pie'))
            // pod_pie.setOption({
            //     title: {
            //         text: '集群Pod概况',
            //         subtext: '',
            //         x: 'center',
            //     },
            //     tooltip: {
            //         trigger: 'item',
            //         // a ==> serias.name b=>data: ['使用','剩余']
            //         formatter: "{a} <br/>{b} {c}% "   
            //     },
            //     legend: {
            //         orient: 'vertical',
            //         bottom: 'bottom',
            //         data: ['使用','剩余']
            //     },
            //     //饼图中各模块的颜色
            //     color: ['#32dadd', '#b6a2de'],
            //     series : [
            //         {
            //             name: 'POD',
            //             type: 'pie',
            //             radius : '55%',
            //             center: ['50%', '60%'],
            //             data:[
            //                 {name:'使用', value: pod_usage_percent},
            //                 {name:'剩余', value: pod_available_percent},
            //             ],
            //             itemStyle: {
            //                 normal: {
            //                     label: {
            //                         show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
            //                         position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
            //                     },
            //                     labelLine: {
            //                         show: false//官网demo里外部标注上的小细线的显示隐藏    默认显示
            //                     }
            //                 }
            //             }
            //         }
            //     ],
            // })
        },
        refresh(){

            let that = this
            let data1= {"stat_type":'schedule'}
            k8s_cluster_post(get_cluster_stats,data1,{},15000).then(response=>{
                let schedule_data = response.data
                that.scheduleData = schedule_data
                if(schedule_data){
                    that.add_chart(schedule_data)
                }
            })

            // let data2 = {"stat_type":'all'}
            // k8s_cluster_post(get_cluster_stats,data2,{},15000).then(response=>{
            //     let all_data = response.data
            //     that.allData = all_data
            // })

            let data3 = {"stat_type":'unschedule'}
            k8s_cluster_post(get_cluster_stats,data3,{},15000).then(response=>{
                let unschedule_data = response.data
                that.unscheduleData = unschedule_data
            })
            that.loading=false

            // k8s_cluster_post(get_cluster_resources,{},{},30000).then(response=>{
            //     let cluster_resources  = response.data['cluster_resources']
            //     console.log(cluster_resources)
            //     this.cluster_resources = cluster_resources
            //     let requests = cluster_resources['requests']
            //     let limits = cluster_resources['limits']
            //     let req_cpu = (requests['cpu']/1000).toFixed(2)
            //     let req_memory =  (requests['memory']/1024).toFixed(2)

            //     let limit_cpu = (limits['cpu']/1000).toFixed(2)
            //     let limit_memory =  (limits['memory']/1024).toFixed(2)

            //     let cpu = "\tCPU请求："+req_cpu+"c "+"CPU限制 "+limit_cpu+"c\t"
            //     let memory = "内存请求："+req_memory+"G "+"内存限制 "+limit_memory+"G"
            //     this.cluster_resources = cpu+memory
            // })

        },


    },
    mounted: function(){
        this.refresh() 
    }

}
</script>

<style scoped>

</style>